<template>
  <div>
    <goga-header title="支付成功">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <img v-if="!order" class="gxb-loading" src="/public/images/loding.gif" alt="">
    <div v-if="order">
      <div class="pay-success-tip">
        <div class="left">
          买家已成功付款 <br>
          您的包裹正整装待发
        </div>
        <div class="right">
          <img src="../../assets/pays-01.png" >
        </div>
      </div>
      <div class="pay-success-address">
        <div class="top">
          <span>{{order.aName}}</span>
          <span>{{order.uPhone}}</span>
        </div>
        <div class="bot">
          {{order.addressDetail}}
        </div>
      </div>
      <div class="pay-success-bottom">
        <div class="p-price">总价：<span class="text-def">¥{{order.oMoney}}</span></div>
        <div class="p-btn">
          <router-link :to="{name:'order'}">查看订单</router-link>
          <router-link :to="{name:'index'}">返回首页</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="babel">
  import api from '@api'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      gogaHeader,
      Icon
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin'
      })
    },
    data: function () {
      return {
        orderID: '',
        order: null
      }
    },
    async mounted() {
      let orderId = this.orderId = this.$route.params.orderId;
      await this.getData();
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      async getData() {
        let {data} = await api.get('api/v1/userInfo/userOrderDetail.ashx', {orderSn: this.orderId});
        if (data.StatusCode === '200') {
          this.order = data
        }
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
